<template>
  <div class="profile-container">
    <!-- Header -->
    <div class="header">
      <div class="back-button">
        <span class="back-icon">←</span>
      </div>
      <div class="title">我的资料</div>
      <div class="preview-button" @click="previews">预览资料</div>
    </div>

    <!-- Progress Section -->
    <div class="progress-section">
      <div class="progress-tip">
        达到60%, 被<span class="highlight-text">推荐概率更大</span>哦
      </div>
      <div class="progress-bar-container">
        <div class="progress-label">资料完成度</div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: progressWidth + '%' }">
            <span class="progress-percentage">{{ progressWidth }}%</span>
          </div>
          <div class="progress-icons">
            <div class="progress-icon lightning">⚡</div>
            <div class="progress-icon document">📄</div>
            <div class="progress-icon crown">👑</div>
          </div>
        </div>
      </div>
      <div class="boost-section">
        <div class="boost-text">免费给你增加曝光，享受上线提醒特权</div>
        <div class="wechat-button">去微信查看</div>
      </div>
    </div>

    <!-- Album Section -->
    <div class="section-container">
      <div class="section-header">
        <div class="section-title">我的相册</div>
        <div class="section-count">0张 ></div>
      </div>
      <div class="album-grid">
        <div class="avatar-upload">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2.jpg-xYiz9Ue9HQ5bkkp7TY9pMc9NBodGcZ.jpeg"
            alt="Profile avatar placeholder"
            class="avatar-image"
            style="opacity: 0.01"
          />
          <div class="avatar-placeholder">上传头像</div>
        </div>
        <div class="add-photo">
          <div class="add-icon">+</div>
          <div class="completion-bonus">完成度+5%</div>
        </div>
      </div>
    </div>

    <!-- Personal Statement Section -->
    <div class="section-container">
      <div class="section-header">
        <div class="section-title">内心独白</div>
        <div class="completion-tag">完成度+5%</div>
      </div>
      <div class="statement-input">
        <div class="input-icon">📝</div>
        <div class="input-placeholder">介绍一下自己，让异性更快了解你</div>
      </div>
    </div>

    <!-- Tab Navigation -->
    <div class="tab-navigation">
      <div class="tab active">我的资料</div>
      <div class="tab">择偶条件</div>
    </div>

    <!-- Basic Info Section -->
    <div class="section-container">
      <div class="section-header">
        <div class="section-title">基本资料</div>
        <div class="completion-tag">完成度+25%</div>
      </div>
      <div class="info-list">
        <div class="info-item" v-for="(item, index) in basicInfo" :key="index">
          <div class="info-label">{{ item.label }}</div>
          <div class="info-value" @click="openModal(item, index)">
            {{ item.value || "未填写" }} >
          </div>
          <Modal
            :modalTitle="`修改${item.label}`"
            :initialValue="item.rawValue || item.value"
            :inputType="item.inputType"
            :options="item.options"
            :unit="item.unit"
            :isOpen="isModalOpen && currentModalIndex === index"
            @submit="handleSubmit(index, $event)"
            @skip="handleSkip"
            @close="closeModal"
          />
        </div>
      </div>
      <!-- Additional Info Section -->

      <div class="section-header">
        <div class="section-title">加分资料</div>
        <div class="completion-tag">完成度+35%</div>
      </div>
      <div class="info-list">
        <div class="info-item" v-for="(item, index) in additionalInfo" :key="index">
          <div class="info-label">{{ item.label }}</div>
          <div class="info-action" @click="openModal(item, index + basicInfo.length)">
            {{ item.action }}
          </div>
          <Modal
            :modalTitle="`修改${item.label}`"
            :initialValue="item.rawValue || item.value"
            :inputType="item.inputType"
            :options="item.options"
            :unit="item.unit"
            :isOpen="isModalOpen && currentModalIndex === index + basicInfo.length"
            @submit="handleSubmit(basicInfo.length + index, $event)"
            @skip="handleSkip"
            @close="closeModal"
          />
        </div>
      </div>
    </div>
    <!-- Bottom Call-to-Action -->
    <div class="bottom-cta">
      <div class="cta-icon">Hi</div>
      <div class="cta-text">添加招呼语，让合适的人更快了解你</div>
      <div class="cta-arrow">></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import dayjs from 'dayjs';
import Modal from './Modal.vue';
import request from '@/utils/request'
import { useRouter } from 'vue-router'
const router = useRouter()

const isModalOpen = ref(false);
const modalTitle = "修改内容";
const currentModalIndex = ref(-1);
const previews=()=>{
  router.push('/Content/preview')
}
const basicInfo = [
  {
    label: '昵称',
    value: '做个平淡的自己',
    inputType: 'text',
    formatter: (v) => v,
    parser: (v) => v.trim()
  },
  {
    label: '性别',
    value: '男士',
    inputType: 'select',
    options: [
      { label: '男士', value: '男士' },
      { label: '女士', value: '女士' }
    ],
    formatter: (v) => v,
    parser: (v) => v
  },
  {
    label: '生日',
    value: '1992年8月14日',
    rawValue: '1992-08-14',
    inputType: 'date',
    formatter: (date) => dayjs(date).format('YYYY年M月D日'),
    parser: (date) => dayjs(date).format('YYYY-MM-DD')
  },
  {
    label: '身高',
    value: '173cm',
    rawValue: 173,
    inputType: 'number',
    unit: 'cm',
    formatter: (v) => `${v}cm`,
    parser: (v) => parseInt(v, 10)
  },
  {
    label: '月收入',
    value: '5001-8000元',
    inputType: 'select',
    options: [
      { label: '3000元以下', value: '3000元以下' },
      { label: '3001-5000元', value: '3001-5000元' },
      { label: '5001-8000元', value: '5001-8000元' },
      { label: '8001-10000元', value: '8001-10000元' },
      { label: '10000元以上', value: '10000元以上' }
    ],
    formatter: (v) => v,
    parser: (v) => v
  },
  {
    label: '工作地区',
    value: '山西太原',
    inputType: 'text',
    formatter: (v) => v,
    parser: (v) => v.trim()
  },
  {
    label: '学历',
    value: '大专',
    inputType: 'select',
    options: ['初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士'].map(v => ({ label: v, value: v })),
    formatter: (v) => v,
    parser: (v) => v
  },
  {
    label: '婚况',
    value: '未婚',
    inputType: 'select',
    options: ['未婚', '离异', '丧偶'].map(v => ({ label: v, value: v })),
    formatter: (v) => v,
    parser: (v) => v
  },
  {
    label: '有没有孩子',
    value: '没有孩子',
    inputType: 'select',
    options: ['有孩子', '没有孩子'].map(v => ({ label: v, value: v })),
    formatter: (v) => v,
    parser: (v) => v
  },
  {
    label: '是否想要孩子',
    value: '',
    inputType: 'select',
    options: ['想要', '不想要', '视情况而定'].map(v => ({ label: v, value: v })),
    formatter: (v) => v,
    parser: (v) => v
  }
];

const additionalInfo = [
  { label: "封面视频", action: "添加封面视频", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v },
  { label: "语音介绍", action: "添加我的声音", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v },
  { label: "心灵视界", action: "去测一测", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v },
  { label: "我的爱好", action: "添加我的爱好", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v },
  { label: "我的观点", action: "添加我的观点", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v },
  { label: "我的认证", action: "完成实名认证", value: "", inputType: 'text', formatter: (v) => v, parser: (v) => v }
];

// 计算进度条宽度
const filledFields = computed(() => {
  return [...basicInfo, ...additionalInfo].filter((item) => item.value).length;
});

const totalFields = basicInfo.length + additionalInfo.length;

const progressWidth = computed(() => {
  return Math.floor((filledFields.value / totalFields) * 100);
});

const openModal = (item, index) => {
  currentModalIndex.value = index;
  isModalOpen.value = true;
};

const closeModal = () => {
  isModalOpen.value = false;
};

const handleSubmit =async  (index, newValue) => {
  if (index < basicInfo.length) {
    const item = basicInfo[index];
    item.rawValue = item.parser(newValue);
    item.value = item.formatter(item.rawValue);
  } else {
    const item = additionalInfo[index - basicInfo.length];
    item.rawValue = item.parser(newValue);
    item.value = item.formatter(item.rawValue);
  }
   // 调用后端接口保存数据
   await saveDataToBackend(index, newValue);
  closeModal();
};
const userId = 12345;
const saveDataToBackend = async (index, newValue) => {
    const formData = {
      field: index,
      value: newValue,
      userId: JSON.parse(localStorage.getItem('userInfo')).id
    };

    try {
    const response = await request({
      url: '/api/save-profile-data',
      method: 'post',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data' // 必须设置
      }

    })
    if (response.code === 200) {
      console.log('数据保存成功');
    } else {
      console.error('数据保存失败:', response.data);
    }
  } catch (error) {
    console.error('发布失败:', error)
    alert('发布失败: ' + (error.response?.data?.message || '网络错误'))
  }

};

const handleSkip = () => {
  closeModal();
};
</script>



<style scoped>
/* Base Styles */
.profile-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #f8e7f1, #f5f5f5 15%);
  min-height: 100vh;
  position: relative;
  color: #333;
}

/* Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 8px;
}

.network {
  display: flex;
  align-items: center;
  gap: 4px;
}

.battery {
  background-color: #000;
  color: white;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.back-button {
  width: 36px;
  height: 36px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.preview-button {
  background-color: white;
  color: #6366f1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* Progress Section */
.progress-section {
  padding: 0 15px;
  margin-bottom: 15px;
}

.progress-tip {
  background-color: #333;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
}

.highlight-text {
  color: #ff6b81;
}

.progress-bar-container {
  margin-bottom: 10px;
}

.progress-label {
  font-size: 16px;
  margin-bottom: 8px;
}

.progress-bar {
  height: 10px;
  background-color: #e5e5e5;
  border-radius: 5px;
  position: relative;
  margin-bottom: 5px;
}

.progress-fill {
  position: absolute;
  height: 100%;
  background-color: #6366f1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-percentage {
  position: absolute;
  color: white;
  font-size: 12px;
}

.progress-icons {
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
  margin-top: 5px;
}

.progress-icon {
  width: 24px;
  height: 24px;
  background-color: #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boost-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
}

.wechat-button {
  color: #6366f1;
  border: 1px solid #6366f1;
  border-radius: 20px;
  padding: 5px 12px;
}

/* Section Container */
.section-container {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 0 15px 15px 15px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
}

.section-count {
  color: #999;
}

.completion-tag {
  color: #6366f1;
  font-size: 14px;
}

/* Album Grid */
.album-grid {
  display: flex;
  gap: 10px;
}

.avatar-upload,
.add-photo {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-align: center;
}

.add-photo {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-icon {
  font-size: 30px;
  color: #6366f1;
}

.completion-bonus {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(99, 102, 241, 0.8);
  color: white;
  font-size: 12px;
  padding: 3px 0;
  text-align: center;
}

/* Statement Input */
.statement-input {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-placeholder {
  color: #999;
  font-size: 14px;
}

/* Tab Navigation */
.tab-navigation {
  display: flex;
  margin: 0 15px 15px 15px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  position: relative;
  background-color: white;
}

.tab.active {
  color: #6366f1;
  font-weight: bold;
  border-bottom: 3px solid #6366f1;
}

.tab:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.tab:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Info List */
.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-value {
  color: #999;
}
/* Bottom CTA */
.bottom-cta {
  position: fixed;
  bottom: 20px;
  left: 15px;
  right: 15px;
  background-color: #ffe6ea;
  border-radius: 30px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-icon {
  background-color: #ff6b81;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.cta-text {
  flex: 1;
  font-size: 14px;
}

.cta-arrow {
  color: #ff6b81;
  font-weight: bold;
}
</style>
